<script type="text/javascript" src="/common/script/jquery.wookmark.js"></script>
<script type="text/javascript" src="/common/script/jquery.imagesloaded.js"></script>
<script type="text/javascript" src="/common/script/paper.js"></script>
<script type="text/javascript" src="/common/script/viewer.js"></script>



<div class="jumbotron" style="background-color:#000;">
  <h1>세상을 SCRAP 한다.!</h1>
  <p>이젠 보고싶은 컨텐츠만 보자. <br>보고싶은 컨텐츠만 SCRAP해서 나만의 PAPER를 만든다.<br /> 
  PC에선 SCRAP 하고 MOBILE에선 PAPER만 본다.<br />
  
  </p>
  <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>

<nav class="navbar navbar-inverse" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Keyword</a>
    </div>
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search" id="txtKeyword">
        </div>
        <button type="button" id="btnSearch" class="btn btn-default">SEARCH</button>
      </form>	
		</div>
	</div>
</nav>	


<div id="main" role="main">
<ul id="tiles" class="row">
</ul>
</div>


<!-- viewer body -->
<div id="viewer_body">
	<div id="viewer_top">
		<span id="tag_title"></span>
		<p class="btn_close"><a href="javascript:void(Book.close())" style="background-position-x:-85px">X</a></p>
	</div>
	<div id="viewer_background" class="content_area clfix" >
		<table width="100%">
		<tr>
		<td width="10%">
			<div class="btn_arrow_left" style="z-index:100">
				<a href="javascript:Book.prevPage()" class="btn_prev">◀</a>
				<div id="left_page_count"></div>
			</div>		
		</td>
		<td width="78%">
		<ul>
			<li id="left_area" class="page_ele">
			<div id="left_title"></div>
			<div class="p_wrap" id="left_contents"></div>
		</li>
		<li id="right_area" class="page_ele">
			<div id="right_title"></div>
			<div class="p_wrap" id="right_contents"></div>
		</li>
		</ul>
		</td>
		<td width="10%">
			<div class="btn_arrow_right" style="z-index:100">
				<a href="javascript:Book.nextPage()" class="btn_next">▶</a>
				<div id="right_page_count"></div>
			</div>					
		</td>
		</tr>
		</table>
	</div>
</div>
<!-- //viewer body -->

<!-- original contents layer -->
<div id="detail_layer" class="lay_feed_detail">
<header>
	<h1 id="detail_subject"></h1>
	<p class="btn_close"><a href="javascript:void(Book.detailClose())" style="background-position-x:-85px">x</a></p>
</header>

	<div class="feed_body">
		<p id="feed_user_detail">text</p>
		<p id="content_message"></p>
	</div>
	<p id="comment_bar"> ▷ Comment ()  </p>
	<footer id="footer">
		<div style="float:left;margin-right:100px;">저작자표시-비영리-동일조건변경허락(BY-NC-SA)</div>
			<p class="w_btn">
				<a href="" target="_blank" style="height: 14px; line-height: 1em; padding-top: 5px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 65px; ">원문보기</a>
			</p>
	</footer>
</div>			
<!-- original contents layer -->

<script type="text/javascript"> 
	var Book = "";
	$(function(){
		Book = new BOOK("<?=$result["m_idx"]?>","static");	
	});

</script>
